Sava - Creative pricing tables

Introduction

First of all, Thank you so much for purchasing this Sava template and for being my loyal customer. You are awesome! You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this item. You may learn basics here and here.

Getting Started

Requirements

You will need the following sofwares to customize the pricing tables.

1. Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)

Include Files

• HTML
• CSS
• JS (Just use only for Slider plan, Switcher plan and color switcher)

There are six demo folder available. Only use code witch you want

Bootstrap (v4.1.3) Grid System

If you want to use three column of pricing tables

<div class="container">										
	<div class="row">										
		<div class="col-lg-4  col-md-6">
			YOUR CODES GOES HERE
		</div>
	</div>
</div>

If you want to use four column of pricing tables

<div class="container-fluid">										
	<div class="row">										
		<div class="col-lg-3  col-md-6  col-12">
			YOUR CODES GOES HERE
		</div>
	</div>
</div>

<!-- Single Plan -->
<div class="col-lg-4 col-md-6">
	<div class="plan-style-1">
		<!-- Plan Head -->
		<div class="plan-header">
			<h3 class="plan-title">Basic</h3>
			<!-- Plan Price -->
			<div class="plan-price">
				<p class="price"><span>$</span>9<span>.99 / M</span></p>
			</div>
		</div>
		<!-- Plan List -->
		<ul class="plan-list">
			<li>10GB Cloud Storage</li>
			<li>40GB Super Bandwidth</li>
			<li>1 SQL Database for website</li>
			<li>5 Email Account</li>
			<li class="strike">Free Domain</li>
			<li class="strike">24/7 Technical Support</li>
		</ul>
		<!-- Plan Bottom -->
		<div class="plan-bottom">
			<a class="plan-button" href="#">Signup Now</a>
		</div>
	</div>
</div>
<!-- End Single Plan-->

/* Start Pricing plan style 1 */
.plan-style-1{
    margin: 15px auto;
	overflow: hidden;
    position: relative;
	text-align: center;
	box-shadow: 0px 0px 30px #eee;
}
.plan-style-1:hover{
	box-shadow: 0px 0px 30px #ccc;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.plan-style-1 .plan-header{
    padding: 30px 0 40px 0;
	position: relative;
}
.plan-style-1 .plan-header:after{
	content: "";
    display: block;
    width: 100%;
    height: 25px;
    position: absolute;
    bottom: 0;
    left: 0;
	background-image: url('../img/header_style_1.png');
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
}
.plan-style-1 .plan-header .plan-title{
	margin-bottom: 30px;
	color: #fff;
}
.plan-style-1 .plan-header .plan-title:after{
	content: "";
	width: 100px;
	height: 3px;
	margin: 0 auto;
	border-radius: 3px;
	background: linear-gradient(to right, transparent, #fff 30%, transparent);
	position: absolute;
	top: 70px;
	left: 0;
	right: 0;
}
.plan-style-1 .plan-price .price{
	margin-bottom: 0;
	font-size: 55px;
    font-weight: 700;
	line-height: 45px;
    color: #fff;
}
.plan-style-1 .plan-price .price span{
	padding: 0 5px;
	font-size: 20px;
    font-weight: 500;
    color: #fff;
}
.plan-style-1 .plan-list{
    padding: 20px 0;
    margin-bottom: 0;
	background-color: #fff;
	position: relative;
	z-index: 1;
}
.plan-style-1 .plan-list li{
	list-style-type: none;
	padding: 10px 0;
	color: #444;
}
.plan-style-1 .plan-bottom{
	padding: 10px 0 50px 0;
	position:relative;
	overflow:hidden;
	background: #fff;
}
.plan-style-1 .plan-button{
    border: 2px solid #fff;
    padding: 10px 30px;
    color: #fff;
	text-decoration: none;
	 background-size: 300% 100%;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.plan-style-1 .plan-button:hover{
	 background-position: 100% 0;
    color: #fff;
 	box-shadow: 0px 20px 20px #eee;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.plan-style-1 .plan-list li.strike{
	color: #ccc;
}
/* End Pricing plan style 1 */

/* Start Pricing plan style 1 */
.plan-style-1 .plan-header{
	background: linear-gradient(to right, #00eefa, #05b6eb);
}
.plan-style-1 .plan-button{
	background-image: linear-gradient(to right, #00eefa, #05b6eb, #05b6eb, #00eefa);
}
/* End Pricing plan style 1 */

@media only screen and (max-width: 576px) {
	.plan-style-1, .plan-style-2, .plan-style-3, .plan-style-4, .plan-style-5, .coming-soon-6{
		max-width: 350px;
	}
	.plan-style-1 .plan-header:after{
	    bottom: -2px;
	}
	.plan-style-2 .plan-header:after{
		bottom: -2px;	
	}
}

Change Colors

There are six type of gradient colors css file(in css folder)

color-1.css = Blue Color (if you want to use blue color to use only "color-1.css")

<link id="color" rel="stylesheet" href="css/color-1.css" media="screen">

color-2.css = Purple Color (if you want to use blue color to use only "color-2.css")

<link id="color" rel="stylesheet" href="css/color-2.css" media="screen">

color-3.css = Orange Color (if you want to use blue color to use only "color-3.css")

<link id="color" rel="stylesheet" href="css/color-3.css" media="screen">

color-4.css = Green Color (if you want to use blue color to use only "color-4.css")

<link id="color" rel="stylesheet" href="css/color-4.css" media="screen">

color-5.css = Pink Color (if you want to use blue color to use only "color-5.css")

<link id="color" rel="stylesheet" href="css/color-5.css" media="screen">

color-6.css = Colden Color (if you want to use blue color to use only "color-6.css")

<link id="color" rel="stylesheet" href="css/color-6.css" media="screen">

Custom Colors

All pricing tables use gradient colors. you need to change only color-1.css file

linear-gradient(to right, #00eefa, #05b6eb);

For example : you can change color red and green. to use like this linear-gradient(to right, red, green);

For example : you can change color #FF0000 and #008000. to use like this linear-gradient(to right, #FF0000, #008000);

#00eefa color replace with #FF0000 color code in color-1.css file all places (Number of places 10)

#05b6eb color replace with #008000 color code in color-1.css file all places (Number of places 16)

Free Resources

• Google Fonts
• Font Awesome Icons
• Owl Carousel
• Modernizr

Thank You

Thank you again for download pricing tables, enjoy it and give us ratting.